<template>
    <div>
        <div class="showTime">
            <p style="text-align: left;padding: 5px 20px;font-size: 30px;height: 50px;">
                <span>0{{hours}}</span>
            </p>
            <p style="padding: 10px;font-size: 50px;height: 50px;color: red">
                <span>0{{mins}}</span>:<span>{{pu0}}{{secs}}</span>
            </p>
            <p style="text-align: right;padding: 5px 20px;font-size: 30px;height: 50px;">
                <span>{{pu1}}{{ms}}</span>
            </p>
        </div>
        <div style="display: none">
            <button @click="startTime()">开始计时</button>
            <button @click="stopTime()">停止</button>
            <button @click="clearTime()">清零</button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                /*跑秒*/
                ms: 0,
                /*秒*/
                secs: 0,
                /*分*/
                mins: 0,
                /*时*/
                hours: 0,
                timeoutId: '',
                isCounting: false,
                pu0:'0',
                pu1:'0'
            }
        },
        methods: {
            startTime() {
                this.clearTime();
                if (!this.isCounting) {
                    this.isCounting = true;
                    this.timeoutId = setInterval( ()=> {
                        this.countTime()
                    },10)
                }
            },
            stopTime() {
                if (this.isCounting) {
                    this.isCounting = false;
                    clearTimeout(this.timeoutId);
                }
            },
            countTime() {
                this.ms += 1;
                if(this.ms>=100){
                    this.secs+=1;
                    this.ms = 0;
                }
                if(this.ms>=10){
                    this.pu1 = ""
                }else{
                    this.pu1 = "0"
                }
                if(this.secs>=60){
                    this.mins+=1;
                    this.secs = 0;
                }
                if(this.secs>=10){
                    this.pu0 = ""
                }else{
                    this.pu0 = "0"
                }
                if(this.mins>=60){
                    this.hours+=1;
                    this.mins = 0;
                }
                if(this.mins>=5){
                    this.stopTime()
                }
                if(this.hours>=24){
                    this.hours = 0;
                }
            },
            clearTime() {
                this.ms = 0;
                this.secs = 0;
                this.mins = 0;
                this.hours = 0;
                this.pu0 = '0';
                this.pu1 = '0';
            }
        },
    }
</script>

<style scoped>
    .showTime{
        width: 100%;
        text-align: center;
    }
    .showTime span{
        display: inline-block;
        width: 50px;
        font-weight: bold;
    }
</style>
